<template>
    <view class="warehouse-in-edit">
       <u-form>
            <view class="add-section">
            	<u-input title="品名" placeholder="填写品名" v-model="warehouseInDetailData.detail.spzs" labelWidth="160" :rules="warehouseInDetailData.rules.spzs"></u-input>
            	<u-select title="纱支" placeholder="请选择" @click="openWpggPicker('纱支')" :value="warehouseInDetailData.detail.wpggA" labelWidth="160" :rules="warehouseInDetailData.rules.wpggA"></u-select>
            	<u-input title="品牌" placeholder="填写品牌" v-model="warehouseInDetailData.detail.spcd" labelWidth="160" :rules="warehouseInDetailData.rules.spcd"></u-input>
            	<u-input :digit="UNIT_WEIGHT_DIGIT" title="件重" type="digit" placeholder="填写件重" v-model="warehouseInDetailData.detail.spjsl" labelWidth="160" :rules="warehouseInDetailData.rules.spjsl">
            		<template v-slot:icon>
            		    <text class="font-black">KG</text>
            		</template>
            	</u-input>
            	<u-input :digit="NUMBER_DIGIT" title="件数" type="digit" placeholder="填写件数" v-model="warehouseInDetailData.detail.spjs" labelWidth="160" :rules="warehouseInDetailData.rules.spjs"></u-input>
            	<u-input :digit="NUMBER_DIGIT" title="重量" placeholder="填写重量" v-model="getSpsl" labelWidth="160" >
            		<template  v-slot:icon>
            		    <text class="font-black">吨</text>
            		</template>
            	</u-input>
                <u-input title="批次" placeholder="填写批次" v-model="warehouseInDetailData.detail.spbh" labelWidth="160" :rules="warehouseInDetailData.rules.spbh"></u-input>
                <u-input title="柜号" placeholder="填写柜号" v-model="warehouseInDetailData.detail.spgh" labelWidth="160"></u-input>
            	<u-select title="用途" placeholder="请选择" @click="openWpggPicker('用途')" :value="warehouseInDetailData.detail.wpggD" labelWidth="160"></u-select>
            	<u-select title="产地" placeholder="请选择" @click="openWpggPicker('产地')" :value="warehouseInDetailData.detail.wpggE" labelWidth="160"></u-select>
            	<u-select title="工艺" placeholder="请选择" @click="openWpggPicker('工艺')" :value="warehouseInDetailData.detail.wpggB" labelWidth="160"></u-select>
            	<u-select title="工序" placeholder="请选择" @click="openWpggPicker('工序')" :value="warehouseInDetailData.detail.wpggC" labelWidth="160"></u-select>
            	<u-select title="漂染性" placeholder="请选择" @click="openWpggPicker('漂染性')" :value="warehouseInDetailData.detail.wpggF" labelWidth="160"></u-select>
            	<u-input title="颜色" placeholder="请填写颜色" v-model="warehouseInDetailData.detail.wpggH" labelWidth="160"></u-input>
            	<u-input title="备注" placeholder="填写货物备注" v-model="warehouseInDetailData.detail.itbz" labelWidth="160"></u-input>
            </view>
            <view class="warehouse-in-edit-attention display-flex justify-center align-center">
                <image src="@/static/icons/attention.png" class="attention-icon"/>
                <span class="font-CE0C0C font-24 ml-5">请完善货物信息，方便您找货！</span>
            </view>
           
        </u-form>
       <view class="warehouse-in-edit-btn">
           <button class="app-primary-button" hover-class="app-primary-button-active" @click="onEdit">修 改</button>
       </view> 
      <u-popup :show="yarnCountData.showPicker" @close="changeYarnCountPicker">
      	<template v-slot:content>
      		<view class="shazhi display-flex flex-wrap">
      		    <view v-for="(item, index) in yarnCountData.columns" :key="item" :class="yarnCountData.active === index?'active item':'item'" @click="yarnCountDataConfirm(item, index)">
      		        <text>{{ item }}</text>
      		    </view>
      		</view>
      	</template>
      </u-popup>
    </view>
  </template>
  <script setup lang="ts">
    import { stock } from '@/api'
    import { reactive, computed, ref } from 'vue'
    import type { WarehouseInDetailData, YarnCountData} from '@/@type/warehouseIn'
    import { WEIGHT_DIGIT, NUMBER_DIGIT, UNIT_WEIGHT_DIGIT } from '@/utils/constant'
    import { util,tip, storage } from '@/utils'
    import { onLoad } from '@dcloudio/uni-app';
	
    const warehouseInDetailData: any = reactive({
		rules:{
			spzs:[{required: true, message:'请填写品名'}],
			wpggA:[{required: true, message:'请选择纱支'}],
			spcd:[{required: true, message:'请填写品牌'}],
			spjsl:[{required: true, message:'请填写件重'}],
			spjs:[{required: true, message:'请填写件数'}],
			spbh:[{required: true, message:'请填写批次'}]
		},
        detail: {
            itbz: '',
			spbh: '',
			spcd: '',
			spcwid: '',
			spgh: '',
			spjs: '',
			spjsl: '',
			spmc: '',
			spsl: '',
			spzs: '',
			ssrqid: '',
			wpggA: '',
			wpggB: '',
			wpggC: '',
			wpggD: '',
			wpggE: '',
			wpggF: '',
			wpggG: '',
			wpggH: ''
        }
    })
    let editIndex:any = ref('')
    const yarnCountData: any = reactive({
        query:{},
        showPicker: false,
        listA:[],
        listB:[],
        listC:[],
        listD:[],
        listE:[],
        listF:[],
        columnsA:[],
        columnsB:[],
        columnsC:[],
        columnsD:[],
        columnsE:[],
        columnsF:[],
		activeA:'',
		activeB:'',
		activeC:'',
		activeD:'',
		activeE:'',
		activeF:'',
        list:[],
        columns:[],
        select:'',
		active:'',
    })
	
	onLoad((options:any) => {
		editIndex = options.editIndex
	})

    const getSpsl = computed(() => {
        let spsl = '-'
        const spjs = warehouseInDetailData.detail.spjs
        const spjsl = warehouseInDetailData.detail.spjsl
        if(spjs && spjsl) {
            spsl = (parseFloat(spjs)*parseFloat(spjsl)*0.001).toFixed(WEIGHT_DIGIT)
        }
        warehouseInDetailData.detail.spsl = spsl
        return spsl
    })

    onLoad(() => {
        const data = storage.getLocalStorage('warehouseIn')
        warehouseInDetailData.detail = data.inp[editIndex]
        yarnCount()
    })

    function yarnCount() {
        stock.getYarnCount(yarnCountData.query).then((res: any) => {
            const data = res.data
            yarnCountData.listA = data['a']
            yarnCountData.listB = data['b']
            yarnCountData.listC = data['c']
            yarnCountData.listD = data['d']
            yarnCountData.listE = data['e']
            yarnCountData.listF = data['f']
            yarnCountData.columnsA = yarnCountData.listA.map((a: any) => a.name)
            yarnCountData.columnsB = yarnCountData.listB.map((a: any) => a.name)
            yarnCountData.columnsC = yarnCountData.listC.map((a: any) => a.name)
            yarnCountData.columnsD = yarnCountData.listD.map((a: any) => a.name)
            yarnCountData.columnsE = yarnCountData.listE.map((a: any) => a.name)
            yarnCountData.columnsF = yarnCountData.listF.map((a: any) => a.name)
        })
    }

    function openWpggPicker(data: any) {
        if(data == '纱支') {yarnCountData.columns = yarnCountData.columnsA;yarnCountData.active = yarnCountData.activeA}
        if(data == '工艺') {yarnCountData.columns = yarnCountData.columnsB;yarnCountData.active = yarnCountData.activeB}
        if(data == '工序') {yarnCountData.columns = yarnCountData.columnsC;yarnCountData.active = yarnCountData.activeC}
        if(data == '用途') {yarnCountData.columns = yarnCountData.columnsD;yarnCountData.active = yarnCountData.activeD}
        if(data == '产地') {yarnCountData.columns = yarnCountData.columnsE;yarnCountData.active = yarnCountData.activeE}
        if(data == '漂染性') {yarnCountData.columns = yarnCountData.columnsF;yarnCountData.active = yarnCountData.activeF}
        yarnCountData.select = data
        changeYarnCountPicker()
    }

    function yarnCountDataConfirm(data: any, index:number) {
        if(yarnCountData.select == '纱支') {warehouseInDetailData.detail.wpggA = data;yarnCountData.activeA = index}
        if(yarnCountData.select == '工艺') {warehouseInDetailData.detail.wpggB = data;yarnCountData.activeB = index}
        if(yarnCountData.select == '工序') {warehouseInDetailData.detail.wpggC = data;yarnCountData.activeC = index}
        if(yarnCountData.select == '用途') {warehouseInDetailData.detail.wpggD = data;yarnCountData.activeD = index}
        if(yarnCountData.select == '产地') {warehouseInDetailData.detail.wpggE = data;yarnCountData.activeE = index}
        if(yarnCountData.select == '漂染性') {warehouseInDetailData.detail.wpggF = data;yarnCountData.activeF = index}  
        changeYarnCountPicker()    
    }

    function changeYarnCountPicker() {
        yarnCountData.showPicker = !yarnCountData.showPicker
    }

    function onEdit() {
		const detail = warehouseInDetailData.detail
		const rules = warehouseInDetailData.rules
		for(let i in rules) {
			for(let j in rules[i] ) {
				if(rules[i][j].required === true && !detail[i]) {
					return tip.showToast(rules[i][j].message)
				}
			}
		}
        const data = storage.getLocalStorage('warehouseIn')
        data.inp[editIndex] = warehouseInDetailData.detail
        storage.setLocalStorage('warehouseIn', data)
        goAppoint()
    }

    function goAppoint() {
        uni.redirectTo({url:'/pages/storage/warehouseIn/appoint'})
    }
</script>
<style lang="scss" scoped>
    .warehouse-in-edit {
        background-color: #F3F4F7;
        .edit-section {
            margin-top:36rpx;
        }
        &-attention {
            padding:150rpx 0 60rpx;
			.attention-icon {
				width:24rpx;
				height: 24rpx;
			}
        }
        &-btn {
            padding:30rpx 0rpx 80rpx;
        }
       .shazhi {
			.item {
				min-width:135rpx;
				padding:0 20rpx;
				display:inline-block;
				height:60rpx;
				line-height: 60rpx;
				color:#999;
				text-align:center;
				border-radius:30rpx;
				border:1rpx solid #999;
				margin:15rpx;
				&.active {
					color:#fff;
					border:1rpx solid #255FB6;
					background:#255FB6;
				}
			}
       }
    }
</style>